<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="openType==1?'课堂表现分':openType==2?'课后作业分':'课堂表现分'"
      :visible="open"
      top="20px"
      width="1000px"
      append-to-body
      @close="cancel()"
    >
      <!-- 顶部数据 -->
      <div class="line flex">
        <div class="line_item flex">
          <div class="line_lable">课程:</div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="info.courseName"
            placement="top-start">
            <div class="line_value overTxt" style="width: 135px">
              {{ info.courseName }}
            </div>
          </el-tooltip>
        </div>
        <div class="line_item flex">
          <div class="line_lable">班级:</div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="info.className"
            placement="top-start">
            <div class="line_value overTxt" style="width: 135px">
              {{ info.className }}
            </div>
          </el-tooltip>
        </div>
        <div class="line_item flex">
          <div class="line_lable">班级平均{{ openType==1?'课堂表现分':openType==2?'作业分':'课堂表现分' }}:</div>
          <div class="line_value overTxt" style="width: 100px">
            <!-- 判断info.avgClassNormalScore是不是浮点型，如果是则保留一位小数 -->
            {{ info.avgScore?info.avgScore.toFixed(2):'--' }}
          </div>
        </div>
      </div>
      <!-- 搜索条件栏 -->
      <div class="header_search flexBet flexColCenter">
        <div class="flex flexColCenter">
          <div class="label">姓名/学号:</div>
          <el-input
            style="width: 200px"
            size="small"
            class="search"
            placeholder="请输入学生姓名"
            v-model="queryParams.search"
            clearable
          >
          </el-input>
          <div class="label" style="margin-left: 20px">分数范围:</div>
          <el-input-number
            size="small"
            :precision="0"
            style="width: 100px !important"
            :min="0"
            :max="queryParams.max"
            controls-position="right"
            v-model="queryParams.min"
            placeholder=""
            clearable
          />
          <div style="margin: 0 5px">至</div>
          <el-input-number
            size="small"
            :precision="0"
            style="width: 100px !important"
            :min="queryParams.min"
            controls-position="right"
            v-model="queryParams.max"
            placeholder=""
            clearable
          />
        </div>
        <div>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="searchList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery"
            >重置</el-button
          >
        </div>
      </div>
      <!-- 表格 -->
      <el-table style="margin-top: 20px" height="500px" v-loading="loading" :data="postList">
        <el-table-column label="学生(学号)" align="center" prop="name">
          <template slot-scope="scope">
            <div>{{ scope.row.studentName }}({{ scope.row.studentNum }})</div>
          </template>
        </el-table-column>
        <el-table-column :label="`${ openType==1?'课堂表现分':openType==2?'课后作业分':'课堂表现分' }`" sortable align="center" prop="normalScore">
          <template slot-scope="scope">
            <div>{{ scope.row.normalScore.toFixed(1) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              v-preventReClick
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              v-preventReClick
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="handleAdd(scope.row)"
              >新增</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button v-preventReClick @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 平时分详情组件 -->
    <usuallyDetailDialog
      :open.sync="usuallyDetailDialog_open"
      :usuallyTopInfo="usuallyDetailPropsInfo"
      :openType="openType"
      :courseStuId="courseStuId"
      @refresh="getList"
    >
    </usuallyDetailDialog>
    <!-- 平时分打分组件 -->
    <usuallyAddDialog
      from="next"
      :openType="openType"
      :open.sync="usuallyAddDialog_open"
      :courseSchedulingId="courseSchedulingId"
      :courseStuId="courseStuId"
      :usuallyTopInfo="usuallyDetailPropsInfo"
      @refreshList="getList"
    >
    </usuallyAddDialog>
  </div>
</template>

<script>
import { getAListOfClassPoints, getClassNormal } from "@/api/usually/usually";
import usuallyDetailDialog from "@/components/usuallyDetailDialog.vue";
import usuallyAddDialog from "@/components/usuallyAddDialog.vue";
export default {
  components: {
    usuallyDetailDialog,
    usuallyAddDialog,
  },
  props: {
    open: Boolean,
    courseSchedulingId: [String, Number],
    //openType:  1-->课堂表现    2-->课后作业  3-->课堂表现分
    openType: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      courseStuId: '',
      usuallyDetailPropsInfo:{},
      // 添加平时分组件
      usuallyAddDialog_open: false,
      usuallyAddDialog_studentId: "",
      // 平时分详情组件
      usuallyDetailDialog_open: false,
      usuallyDetailDialog_studentId: "",
      total: 0,
      postList: [],
      info: {},
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        search: undefined,
        min: undefined,
        max: undefined,
      },
    };
  },
  watch: {
    open(e) {
      if (e) {
        this.resetQuery();
      }
    },
  },
  mounted() {},
  methods: {
    searchList(){
      if (this.queryParams.min==undefined&&this.queryParams.max!=undefined||this.queryParams.min!=undefined&&this.queryParams.max==undefined){
        this.$modal.msgWarning('请输入完整的分数范围后再查询')
        return
      }
      this.getList()
    },
    handleDetail(item) {
      let obj={
        ...this.info,
        ...item,
        selfNormalScore:item.normalScore,
      }
      this.courseStuId = item.courseStuId
      this.usuallyDetailPropsInfo = obj
      this.usuallyDetailDialog_open = true;
    },
    handleAdd(item) {
      let obj={
        ...this.info,
        ...item,
        selfNormalScore:item.normalScore,
      }
      this.courseStuId = item.courseStuId
      this.usuallyDetailPropsInfo = obj
      this.usuallyAddDialog_open = true;
    },
    async getInfo() {
      let params={
        //课后作业type：2，其他是1
        type:this.openType == 2 ? 2:1
      }
      let res = await getClassNormal(this.courseSchedulingId,params);
      if (res.data) {
        this.info = res.data;
      }
    },
    async getList() {
      console.log("获取学生平时分列表和顶部数据");
      this.loading = true;
      let params={
        search: this.queryParams.search,
        minScore: this.queryParams.min,
        maxScore: this.queryParams.max,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        //课后作业type：2，其他是1
        type:this.openType == 2 ? 2:1
      }
      let res = await getAListOfClassPoints(this.courseSchedulingId, params);
      this.postList = res.rows;
      this.total = res.total;
      this.loading = false;
      this.getInfo();
    },
    cancel() {
      this.$emit("update:open", false);
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        search: undefined,
        min: undefined,
        max: undefined,
      };
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
.header_search {
  width: 100%;
  background: white;
  border-radius: 16px;
  box-sizing: border-box;
  display: flex;
  .label {
    margin-right: 10px;
  }
}
.line {
  margin-bottom: 15px;
}
.line_item {
  box-sizing: border-box;
  padding-right: 15px;
  width: 234px;
}
.line_lable {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(153, 153, 153, 1);
}
.line_value {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: rgba(51, 51, 51, 1);
}
</style>
